<template>
  <div class="common_page comment_wrap" v-loading="loading">
    <div class="condition_wrap">
      <div
        class="condition_item"
        @click="handleSelect(item)"
        :class="{ active: currentCondition === item.approvalStatus }"
        v-for="(item, index) in conditon"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="operation_wrap">
      <el-button type="primary" @click="handleAddComment">增加评论</el-button>
      <div>
        <el-input
          placeholder="选手名称、评论内容"
          suffix-icon="el-icon-search"
          v-model="searchKey"
          clearable
          @change="handleSearch"
        >
        </el-input>
      </div>
    </div>
    <div class="table_wrap">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column>
          <template slot="header">
            <el-dropdown trigger="click">
              <span style="cursor: pointer; color: #999">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="handleOperate(item)"
                  v-for="item in operate"
                  :key="item.value"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            <div class="head_wrap">
              <el-image
                style="border-radius: 2px; width: 35px; height: 35px"
                :src="
                  scope.row.userPhotoLink
                    ? scope.row.userPhotoLink
                    : require('../../../assets/images/cover.png')
                "
                fit="cover"
              ></el-image>
              <span style="color: #999; margin-left: 10px">{{
                scope.row.userNickname
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="voteTilte" label="活动名称" align="center">
        </el-table-column>
        <el-table-column prop="contestantName" label="选手" align="center">
        </el-table-column>
        <el-table-column prop="content" label="评论内容" align="center">
          <template slot-scope="scope">
            <div class="comment_detail">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="评论时间"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-dropdown>
                <span
                  class="name"
                  :style="scope.row.approvalStatus | filterClass"
                >
                  {{ scope.row.approvalStatus | filterStatus
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="handleClick(scope.row, ele)"
                    v-for="(ele, i) in operate"
                    :key="i"
                    >{{ ele.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationblock" v-if="total">
        <el-pagination
          background
          @current-change="handleChangePage"
          :page-size="query.pageSize"
          :current-page="query.pageNum"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增评论"
      :visible.sync="commentShow"
      width="550px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div>
        <el-form
          :model="commentForm"
          :rules="rulesComment"
          ref="commentForm"
          label-width="120px"
          class="demo-ruleForm"
          label-position="left"
          :hide-required-asterisk="true"
        >
          <el-form-item label="活动名称">
            <div>{{actDetails.title}}</div>
          </el-form-item>
          <el-form-item label="选手名称">
            <el-select
              style="width: 300px"
              v-model="commentForm.contestantId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in playerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评论昵称" prop="userNickname">
            <el-input
              style="width: 300px"
              v-model="commentForm.userNickname"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="评论头像" prop="userPhotoLink">
            <upload
              :imageUrl="commentForm.userPhotoLink"
              @handleSuccess="handleSuccess"
              type="BG_IMAGE"
              custom="custom"
              :styleObject="{ width: '100px', height: '100px' }"
              :showSizeTips="true"
              size='400*400'
            ></upload>
          </el-form-item>
          <el-form-item label="评论内容" prop="content">
            <el-input
              type="textarea"
              :rows="4"
              style="width: 300px"
              placeholder="请输入内容"
              v-model="commentForm.content"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="评论时间">
            <el-date-picker
              v-model="commentForm.createdTime"
              type="datetime"
              style="width: 300px"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <div>
              <el-button @click="commentShow = false">取消</el-button>
              <el-button
                @click="handleConfirm"
                style="margin-left: 40px"
                type="primary"
                >确定</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import upload from "@/components/upload";
import { formatDate } from "@/utils/filter";
import { mapGetters } from "vuex";
export default {
  components: {
    upload,
  },
  data() {
    return {
      conditon: [
        {
          name: "全部评论",
          approvalStatus: "",
        },
        {
          name: "待审核",
          approvalStatus: "WAIT",
        },
        {
          name: "已通过",
          approvalStatus: "PASS",
        },
        {
          name: "已拒绝",
          approvalStatus: "REFUSE",
        },
      ],
      splashLink: "",
      currentCondition: "",
      searchKey: "",
      commentShow: false,
      commentForm: {
        content: "", //评论内容
        contestantId: "", //选手id
        createdTime: "", //评论时间
        userNickname: "", //评论昵称
        userPhotoLink: "", //评论头像
        voteId: Number(this.$route.query.id),
      },
      rulesComment: {
        userNickname: [
          { required: true, message: "请输入评论昵称", trigger: "blur" },
        ],
        userPhotoLink: [
          { required: true, message: "请上传头像", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入评论内容", trigger: "blur" },
        ],
      },
      query: {
        approvalStatus: "", //WAIT, PASS, REFUSE
        content: "",
        contestantName: "",
        pageNum: 1,
        pageSize: 10,
        voteId: this.$route.query.id,
      },
      queryPlayer: {
        hidden: null, //null代表全部，true代表隐藏，false代表显示
        introduction: "", //根据选手简介搜索
        name: "", //根据选手名称搜索
        number: "", //根据选手编号搜索
        order: "", //NUMBER_ASC表示编号正序,NUMBER_DESC表示编号倒序，VC_ASC表示票数正序，VC_DESC表示票数倒序
        pageNum: 1,
        pageSize: 999999,
        propery: "", //COVER_LINK_NONE表示封面无连接,COVER_LINK表示封面有链接，ENABLED表示禁用的选手，INTRODUCTION_NONE表示无简要介绍，INTRODUCTION表示有简要介绍，DETAILS_NONE表示无详细介绍，DETAILS表示有详细介绍
        voteId: this.$route.query.id,
      },
      playerList: [],
      tableData: [],
      operate: [
        {
          name: "通过",
          value: "PASS",
        },
        {
          name: "拒绝",
          value: "REFUSE",
        },
        {
          name: "删除",
          value: "DELETE",
        },
      ],
      total: 0,
      auditArr: {},
      detetePlayerList: [],
      actDetails:{}
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  filters: {
    filterStatus(val) {
      let str = "";
      switch (val) {
        case "PASS":
          str = "通过";
          break;
        case "REFUSE":
          str = "拒绝";
          break;
        case "WAIT":
          str = "待审核";
          break;
        default: {
          str = "";
          break;
        }
      }
      return str;
    },
    filterClass(val) {
      let str = "";
      switch (val) {
        case "PASS":
          str = "#00bd27";
          break;
        case "REFUSE":
          str = "#FB4723";
          break;
        case "WAIT":
          str = "#409EFF";
          break;
        default: {
          str = "";
          break;
        }
      }
      return {
        color: str,
      };
    },
  },
  created() {
    this.getCommentList();
    this.getPlayerList();
    this.getActDetail();
  },
  methods: {
    //获取活动信息
    getActDetail() {
      this.$api("vote.actById", {
        id: this.$route.query.id,
      }).then((res) => {
        this.actDetails = res;
      });
    },
    //活动闪屏广告
    handleSuccess(link) {
      this.commentForm.userPhotoLink = link;
    },
    handleAddComment() {
      //先判断是否有选手，没得选手不能增加评论
      if (this.playerList.length) {
        this.commentForm.createdTime = new Date();
        this.commentForm.contestantId = this.playerList[0].value;
        this.commentShow = true;
      } else {
        this.$message({
          message: "请先添加选手再来添加评论哦！",
          type: "warning",
          duration: 2000,
        });
      }
    },
    handleSelect(item) {
      this.currentCondition = item.approvalStatus;
      this.query.approvalStatus = item.approvalStatus;
      this.query.pageNum = 1;
      this.getCommentList();
      // if (item.approvalStatus === "WAIT") {
      //   this.query.approvalStatus = "WAIT";
      //   this.getCommentList();
      // } else if (item.approvalStatus === "PASS") {
      //   this.query.approvalStatus = "PASS";
      //   this.getCommentList();
      // } else if (item.approvalStatus === "REFUSE") {
      //   this.query.approvalStatus = "REFUSE";
      //   this.getCommentList();
      // } else {
      //   this.getCommentList();
      // }
    },
    handleSearch() {
      console.log(this.searchKey);
      this.query.content = this.searchKey;
      this.query.contestantName = this.searchKey;
      this.getCommentList();
    },
    getCommentList() {
      this.$api("comment.getCommentList", this.query).then((res) => {
        this.total = res.count;
        console.log(res);
        this.tableData = res.data;
      });
    },
    //获取选手列表
    getPlayerList() {
      this.$api("player.getPlayerList", this.queryPlayer).then((res) => {
        console.log(res);
        res.data.forEach((item) => {
          this.playerList.push({
            value: item.id,
            label: item.name,
          });
        });
      });
    },
    //操作
    handleOperate(item) {
      console.log(item);
      if (this.detetePlayerList.length) {
        const arr = [];
        this.detetePlayerList.forEach((item) => {
          arr.push(item.id);
        });
        if (item.value == "DELETE") {
          this.$confirm("是否确认删除当前选中评论？", "删除评论", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$api("comment.deleteComment", {
                ids: arr,
              }).then((res) => {
                console.log(res);
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1000,
                });
                this.query.pageNum = 1;
                this.getCommentList();
              });
            })
            .catch(() => {});
        } else {
          this.$api("comment.audit", {
            ids: arr,
            approvalStatus: item.value,
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1000,
            });
            this.getCommentList();
          });
        }
      } else {
        this.$message.error({
          type: "error",
          message: "请先选择要操作的数据",
          duration: 1000,
        });
      }
    },
    handleChangePage(value) {
      this.query.pageNum = value;
      this.getCommentList();
    },
    handleConfirm() {
      console.log(this.commentForm);
      this.$refs.commentForm.validate((valid) => {
        if (valid) {
          this.$api("comment.create", {
            ...this.commentForm,
            createdTime: formatDate(
              new Date(this.commentForm.createdTime).getTime()
            ),
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "新增成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                this.commentForm = {
                  content: "", //评论内容
                  contestantId: "", //选手id
                  createdTime: "", //评论时间
                  userNickname: "", //评论昵称
                  userPhotoLink: "", //评论头像
                  voteId: Number(this.$route.query.id),
                };
              },
            });

            this.commentShow = false;
            this.query.pageNum = 1;
            this.getCommentList();
          });
        } else {
          console.log(2);
          return false;
        }
      });
    },
    handleSelectChange(val) {
      console.log(val);
      this.detetePlayerList = val;
      console.log(this.detetePlayerList);
    },
    handleClick(item1, item2) {
      if (item2.value == "DELETE") {
        this.$confirm("是否确认删除该评论？", "删除评论", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$api("comment.deleteComment", {
              ids: [item1.id],
            }).then((res) => {
              console.log(res);
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1000,
              });
              this.query.pageNum = 1;
              this.getCommentList();
            });
          })
          .catch(() => {});
      } else {
        this.$api("comment.audit", {
          ids: [item1.id],
          approvalStatus: item2.value,
        }).then((res) => {
          console.log(res);
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1000,
          });
          this.getCommentList();
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.comment_wrap {
  width: 100%;
  .condition_wrap {
    display: flex;
    .condition_item {
      margin-right: 40px;
      font-size: 14px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        color: $themeColor;
      }
    }
    .active {
      color: $themeColor;
      border-bottom: 2px solid $themeColor;
    }
  }
  .operation_wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
  }
  .table_wrap {
    ::v-deep.el-input .el-input__inner {
      border: none;
      background-color: transparent;
    }
    .paginationblock {
      margin-top: 30px;
    }
    .head_wrap {
      display: flex;
      align-items: center;
    }
    .name {
      cursor: pointer;
    }
    .comment_detail {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>